<template>
  <slide-view @side-close="handleClose">
    <flex-box v-loading="loading" mode="column" align-items="stretch" class="detail-container">
      <!-- detail-header -->
      <div class="detail-header">
        <flex-box class="t-section">
          <img src="/image/detail.png" class="t-img">
          <div class="t-name">{{ detail.terminalCustomerName }}</div>
<!--          <el-button class="head-handle-button" type="primary" @click.native="handleEdit">编辑</el-button>-->
<!--          <el-dropdown trigger="click" @command="handleTypeClick">-->
<!--            <flex-box class="t-more">-->
<!--              <div>更多</div>-->
<!--              <i class="el-icon-arrow-down el-icon&#45;&#45;right" style="color:#ccc;" />-->
<!--            </flex-box>-->
<!--            <el-dropdown-menu slot="dropdown">-->
<!--              <el-dropdown-item icon="">锁定</el-dropdown-item>-->
<!--            </el-dropdown-menu>-->
<!--          </el-dropdown>-->
          <img class="t-close" src="/image/close.png" @click="handleClose">
        </flex-box>
        <flex-box class="h-section" align-items="stretch">
          <flex-box-item :span="6" class="h-item">
            <div class="h-title">客户名称</div>
            <div class="h-value text-one-line">{{ detail.customerName }}</div>
          </flex-box-item>
        </flex-box>
      </div>
      <!-- detail-content -->
      <div class="tabs">
        <el-tabs v-model="currentTabName">
          <el-tab-pane label="基本信息" name="CustomerBaseInfo" />
          <!-- <el-tab-pane label="当前零配件" name="Materials" /> -->

          <el-tab-pane label="当前整车" name="currentVehicle" />
          <el-tab-pane label="收货人" name="consignee" />
          <el-tab-pane label="仓储费" name="WarehouseCharge" />
          <el-tab-pane label="配送费" name="DeliveryCharge" />
          <el-tab-pane label="包装费" name="PackingCharge" />
          <el-tab-pane label="叉车费" name="ForkliftCharge" />
        </el-tabs>
      </div>
      <div id="follow-log-content" class="t-loading-content">
        <keep-alive>
          <component :is="tabName" :id="id" :detail="detail" :customer="detail" />
        </keep-alive>
      </div>
    </flex-box>
  </slide-view>
</template>

<script>
import DetailMixin from '@/mixins/Detail'
import CustomerSave from '@/views/basic/customer/CustomerSave'
import CustomerBaseInfo from '@/views/basic/customer/CustomerBaseInfo'
import Materials from '@/views/basic/customer/Materials'
import CurrentVehicle from '@/views/basic/customer/CurrentVehicle'
import Consignee from '@/views/basic/customer/Consignee'

import WarehouseCharge from '@/views/basic/customer/WarehouseCharge'
import DeliveryCharge from '@/views/basic/customer/DeliveryCharge'
import PackingCharge from '@/views/basic/customer/PackingCharge'
import ForkliftCharge from '@/views/basic/customer/ForkliftCharge'
import CustomerApi from '@/api/basic/CustomerApi'

export default {
  name: 'TerminalCustomerDetail',
  components: {
    CustomerSave,
    CustomerBaseInfo,
    Materials,
    Consignee,
    CurrentVehicle,
    WarehouseCharge,
    DeliveryCharge,
    PackingCharge,
    ForkliftCharge
  },
  mixins: [DetailMixin],
  data() {
    return {
      currentTabName: 'CustomerBaseInfo'
    }
  },
  computed: {
    tabName() {
      if (this.currentTabName === 'CustomerBaseInfo') {
        return 'CustomerBaseInfo'
      }
      if (this.currentTabName === 'Materials') {
        return 'Materials'
      }
      if (this.currentTabName === 'currentVehicle') {
        return 'CurrentVehicle'
      }
      if (this.currentTabName === 'consignee') {
        return 'Consignee'
      }
      if (this.currentTabName === 'WarehouseCharge') {
        return 'WarehouseCharge'
      }
      if (this.currentTabName === 'DeliveryCharge') {
        return 'DeliveryCharge'
      }
      if (this.currentTabName === 'PackingCharge') {
        return 'PackingCharge'
      }
      if (this.currentTabName === 'ForkliftCharge') {
        return 'ForkliftCharge'
      }
      return ''
    }
  },
  mounted() {
    this.setApi(CustomerApi)
    if (this.id) {
      this.getDetail()
    }
  },
  methods: {
    handleTypeClick(type) {
      if (type === 'edit') {
        this.$emit('callback', { type: 'edit' })
      } else if (type === 'option1') {
        console.log('option1')
      } else if (type === 'option2') {
        let message = ''
        if (type === 'transform') {
          message = '确定option2吗?'
        }
        this.$confirm(message, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
          this.confirmHandle(type)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
//客户相关详情 头部类似布局
.el-tabs ::v-deep .el-tabs__nav-wrap::after {
  display: none !important;
}

.el-tabs ::v-deep .el-tabs__header {
  background-color: #F5F6F9;
  padding: 0 17px;
  margin: 0 0 15px !important;
}

.el-tabs ::v-deep .el-tabs__item {
  font-size: 13px !important;
  height: 40px !important;
  line-height: 40px !important;
}

</style>
